<template>
	<view class="content">
		<view class="item">
			<view class="top justify-start">
				<view class="logo">
					<image :src="pestsInfo.diseaseImgList" mode=""></image>
				</view>
				<view class="text">
					<view class="title">{{pestsInfo.diseaseName}}</view>
					<view class="text1">英文名:{{pestsInfo.diseaseNameEng}}</view>
					<view class="text1">异 &nbsp;&nbsp;名:{{pestsInfo.diseaseNameOther}}</view>
					<view class="text1">农作物类型:{{$util.getDictData('crop_type',pestsInfo.cropsType)}}</view>
					<view class="text1">农作物名称:{{pestsInfo.crops}}</view>
				</view>
			</view>
			<view class="main">
				<view class="intro">
					<view class="title">简介:</view>
					<view class="text">
						{{pestsInfo.diseaseIntro}}
					</view>
				</view>
				<view class="intro">
					<view class="title">危害症状:</view>
					<view class="text">
						{{pestsInfo.damageSym}}
					</view>
				</view>
				<view class="intro">
					<view class="title">形态: </view>
					<view class="text">
						{{pestsInfo.morphology}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getPestsOne} from '@/api/index/index.js'

export default {
		data() {
			return {
				pestsInfo: {}
			}
		},
		methods: {
			async getPestsOneFn(id) {
				let res = await getPestsOne({
					id
				});
				if (!res.diseaseImgList) {
					res.diseaseImgList = ''
				}
				this.pestsInfo = res;
				this.pestsInfo.diseaseImgList = this.pestsInfo.diseaseImgList.split(',')[0];
				if (!this.pestsInfo.diseaseImgList) {
					if (res.diseaseType == 1) {
						this.pestsInfo.diseaseImgList = '/static/index/default2.png'
					} else {
						this.pestsInfo.diseaseImgList = '/static/index/default.png'
					}
				}
			}
		},
		onLoad(options) {
			this.getPestsOneFn(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 1.4rem;
		color: #333333;
		box-shadow: inset 0rem .3rem .6rem .1rem rgba(153, 153, 153, 0.1);

		.item {
			margin: 0 2rem;
			padding-top: 2.5rem;

			.top {
				.logo {
					width: 14.5rem;
					height: 15rem;
					border-radius: .8rem;

					image {
						width: 14.5rem;
						height: 15rem;
						border-radius: .8rem;
					}
				}

				.text {
					margin-left: 1rem;

					.title {
						font-size: 1.6rem;
						font-weight: bold;
						margin-bottom: 1.5rem;
					}

					.text1 {
						margin-bottom: .5rem;
					}
				}
			}

			.main {
				.intro {
					font-size: 1.2rem;
					line-height: 2.2rem;
					margin-top: 1rem;
				}
			}
		}
	}
</style>
